<template>
  <div class='photos'>
    <slot></slot>
    <ul>
      <li @click='$emit("trigger",index)' v-for='(photo,index) in photos' :key='photo'>
        <img :src="photo" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['photos']
}
</script>

<style lang='scss' scoped>
  .photos{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 11;
    top: 0;
    left: 0;
    ul{
      display: flex;
      flex-wrap: wrap;
      margin-top: .5rem;
      li{
        width: 33.333333%;
        height:1.24rem;
        padding: .02rem;
        img{
          width:100%;
          height:100%;
        }
      }
    }
  }
</style>
